<template>
    <section>

        <el-col>客户信息</el-col><br><br>
        <div>
            <el-row type="flex" class="row-bg" justify="center">
                <el-col :span="2"><div class="grid-content bg-purple">客户姓名:</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light">{{conItem.customer_full_name}}</div></el-col>
                <el-col :span="2"><div class="grid-content bg-purple">证件类型:</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light">{{dict.contract_identity_type[conItem.customer_identity_type]}}</div></el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="center">
                <el-col :span="2"><div class="grid-content bg-purple">证件号码:</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light">{{conItem.customer_identity_no}}</div></el-col>
                <el-col :span="2"><div class="grid-content bg-purple">性别:</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light">{{dict.contract_customer_gender[conItem.customer_gender]}}</div></el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="center">
                <el-col :span="2"><div class="grid-content bg-purple">联系电话:</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light">{{conItem.customer_mobile}}</div></el-col>
                <el-col :span="2"><div class="grid-content bg-purple">联系地址:</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light">{{conItem.customer_address}}</div></el-col>
            </el-row>
        </div>


        <br><br><el-col>销售信息</el-col><br><br>
        <el-row type="flex" class="row-bg" justify="center">
            <el-col :span="2"><div class="grid-content bg-purple">销售姓名:</div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light">{{conItem.sale_name}}</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
        </el-row>


        <br><br> <el-col>合同信息</el-col><br><br>
        <el-row type="flex" class="row-bg" justify="center">
            <el-col :span="2"><div class="grid-content bg-purple">合同编号:</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">{{conItem.no}}</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple">产品名称:</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">{{conItem.product_name}}</div></el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="center">
            <el-col :span="2"><div class="grid-content bg-purple">投资期限:</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">{{dict.contract_investment_period[conItem.investment_period]}}</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">客户收益返还方式:</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light">{{dict.contract_income_return_type[conItem.income_return_type]}}</div></el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="center">
            <el-col :span="2"><div class="grid-content bg-purple">预期收益率:</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">{{conItem.expected_rate_of_return/10000}} %</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple">合同金额:</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">{{amountFormatter(conItem.amount/100) }}</div></el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="center">
            <el-col :span="2"><div class="grid-content bg-purple">预期收益:</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">{{amountFormatter(conItem.expected_earnings/100)}}元</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple">月返还收益:</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">{{amountFormatter(conItem.month_return/100)}}元</div></el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="center">
            <el-col :span="2"><div class="grid-content bg-purple">合同生效日:</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">{{conItem.term_start}}</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple">合同到期日:</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">{{conItem.term_end}}</div></el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="center">
            <el-col :span="2"><div class="grid-content bg-purple">赠金:</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">{{conItem.donation_amount}}</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple">到账方式:</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">{{conItem.payment_method}}</div></el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="center">
            <el-col :span="2"><div class="grid-content bg-purple">签订类型:</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">{{dict.contract_sign_type[conItem.sign_type]}}</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>

        <br><br>
        <el-col>银行信息</el-col><br><br>
        <el-row type="flex" class="row-bg" justify="center">
            <el-col :span="2"><div class="grid-content bg-purple">账户名称:</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">{{conItem.bank_account_name}}</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple">银行账号:</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">{{conItem.bank_no}}</div></el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="center">
            <el-col :span="2"><div class="grid-content bg-purple">开户行名称:</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">{{conItem.bank_branch_name}}</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple">开户行地址:</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">{{conItem.bank_address}}</div></el-col>
        </el-row>
        <br><br>
        <el-col>附件信息</el-col><br><br>
        <el-row type="flex" class="row-bg" justify="center" v-for="item in conItem.attachment_info" :key="item.id">
            <el-col :span="16"><div class="grid-content bg-purple"><a :href="item.url" target="_blank">{{item.name}}</a></div></el-col>
        </el-row>

        <br><br>
        <el-col></el-col><br><br>
        <div class="div-padd">
            <el-form label-position="left" inline class="demo-table-expand" style="text-align: center">

                    <el-button @click="agreeCont">审核通过</el-button>


                    <el-button @click="refuseCont">审核拒绝</el-button>

            </el-form>
        </div>

    </section>
</template>
<script>

    import * as API from '../../../api/contract_api';
    import * as commons from '../../../common/js/commons';
    import dict from '../../../common/js/dict';

    export default {
        props: ['contract_id'],
        data () {
            return {
                conItem: {},
                dict: dict
            }
        },
        methods: {
            amountFormatter(val) {
                return commons.formatNum(val);
            },
            getItem(){
                API.contractInfo({"id": this.contract_id}).then((res)=>{
                    let result = JSON.parse(res.data.datas);

                    if(res.data.status == 200){
                        this.conItem = result;
                        var department_name = this.conItem.sale_department_name==null ? '' : '/' + this.conItem.sale_department_name;
                        var team_name = this.conItem.sale_team_name==null ? '' : '/' + this.conItem.sale_team_name;
                        var sale_position_name = this.conItem.sale_position_name==null ? '' : '/' + this.conItem.sale_position_name;
                        this.conItem.sale_name = this.conItem.sale_name + department_name + team_name + sale_position_name;
                        // <!-- ============================================ 产品名称拼接 ================================================ -->
                        var name = this.conItem.product_name == null ? '' : this.conItem.product_name;
                        var p = this.conItem.investment_period == null ? '' : " - " + dict.contract_investment_period[this.conItem.investment_period];    //投资期限
                        var t = this.conItem.income_return_type == null ? '' : " - " + dict.contract_income_return_type[this.conItem.income_return_type];    //客户收益返还方式
                        var r = this.conItem.expected_earnings == null ? '' : " - " + (this.conItem.expected_earnings/10000) + "%"; //预期收益率
                        this.conItem.product_info = name + p + r + t;
                    }else{
                        if(res.data.status === 401){
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.status+" "+res.data.msg);
                    }
                });
            },
            agreeCont() {
                this.$confirm('确认审核通过?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    API.pendingContractAgree({"id": this.contract_id}).then((res)=>{
                        if(res.data.status == 200){
                            this.$message("合同已审核通过!");
                           //window.$parent.clostDialog(2);
                            this.$emit('clostDialog','2');
                        }else{
                            if(res.data.status === 401){
                                this.$router.push('/login');
                            }
                            this.$message.error(res.data.status+" "+res.data.msg);
                        }
                    });
                }).catch(() => {});
            },
            refuseCont() {
                this.$prompt('请输入拒绝原因：', '审核拒绝', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputType:'textarea',
                    inputPattern: /([A-Za-z0-9_]|[\u4e00-\u9fa5]|[^\x00-\xff])+/,
                    inputErrorMessage: '不能为空！'
                }).then(({ value }) => {
                    API.pendingContractRefuse({"id": this.contract_id,"remark":value}).then((res)=>{
                        if(res.data.status == 200){
                            this.$message("合同已拒绝!");
                            this.$emit('clostDialog','2');
                        }else{
                            if(res.data.status === 401){
                                this.$router.push('/login');
                            }
                            this.$message.error(res.data.status+" "+res.data.msg);
                        }
                    });
                }).catch(() => {});
            },
        },
        mounted(){
            this.$nextTick(function () {
                this.getItem();
            })
        }
    }
</script>
<style lang="scss" scoped>
    .el-col .el-col-24{
        text-align:left;font-weight: bolder;font-size: 14px;
    }
    .div-padd{
     //   padding: 10px 230px;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 40%;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

</style>
